<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>home</title>
    <link href="<%=request.getContextPath()%>/resources/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="<%=request.getContextPath()%>/resources/js/jQuery/jquery-2.1.4.min.js"></script>
    <script src="<%=request.getContextPath()%>/resources/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="<%=request.getContextPath()%>/resources/js/bootstrap/js/bootstrap-paginator.min.js"></script>
    <style type="text/css">
        #queryDiv {
            margin-right: auto;
            margin-left: auto;
            width: 600px;
        }

        #textInput {
            margin-top: 10px;
        }

        #tableResult {
            margin-right: auto;
            margin-left: auto;
            width: 600px;
        }

        .pageDetail {
            display: none;
        }

        .show {
            display: table-row;
        }

        td {
            width: 150px
        }
    </style>
    <script>
        $(function () {
            $('#list').click(function () {
                $('.pageDetail').toggleClass('show');
            });
        });

    </script>
</head>
<body>
<div id="queryDiv">

</div>
<form id="form1" action="listuser" method="get">
    <input id="txtUname" type="text" placeholder="请输入用户名" name="userName">
    <input id="txtPnum" type="text" placeholder="页码" name="page">
    <input id="txtPsize" type="text" placeholder="页面大小" name="rows">
    <input type="submit" value="查询" class="btn btn-primary"/>
    <%--<button id="queryButton" class="btn btn-primary" type="button">查询</button>--%>

    <!-- 底部分页按钮 -->
    <div id="bottomTab"></div>
</form>
<c:if test="${pageInfo!=null}">

    <table class="gridtable" style="width:100%;">
        <tr>
            <th colspan="2">分页信息 - [<a href="javascript:;" id="listuser">展开/收缩</a>]</th>
        </tr>
        <tr class="pageDetail">
            <th style="width: 300px;">当前页号</th>
            <td>${pageInfo.pageNum}</td>
        </tr>
        <tr class="pageDetail">
            <th>页面大小</th>
            <td>${pageInfo.pageSize}</td>
        </tr>
        <tr class="pageDetail">
            <th>起始行号(>=)</th>
            <td>${pageInfo.startRow}</td>
        </tr>
        <tr class="pageDetail">
            <th>终止行号(<=)</th>
            <td>${pageInfo.endRow}</td>
        </tr>
        <tr class="pageDetail">
            <th>总结果数</th>
            <td>${pageInfo.total}</td>
        </tr>
        <tr class="pageDetail">
            <th>总页数</th>
            <td>${pageInfo.pages}</td>
        </tr>
        <tr class="pageDetail">
            <th>第一页</th>
            <td>${pageInfo.firstPage}</td>
        </tr>
        <tr class="pageDetail">
            <th>前一页</th>
            <td>${pageInfo.prePage}</td>
        </tr>
        <tr class="pageDetail">
            <th>下一页</th>
            <td>${pageInfo.nextPage}</td>
        </tr>
        <tr class="pageDetail">
            <th>最后一页</th>
            <td>${pageInfo.lastPage}</td>
        </tr>
        <tr class="pageDetail">
            <th>是否为第一页</th>
            <td>${pageInfo.isFirstPage}</td>
        </tr>
        <tr class="pageDetail">
            <th>是否为最后一页</th>
            <td>${pageInfo.isLastPage}</td>
        </tr>
        <tr class="pageDetail">
            <th>是否有前一页</th>
            <td>${pageInfo.hasPreviousPage}</td>
        </tr>
        <tr class="pageDetail">
            <th>是否有下一页</th>
            <td>${pageInfo.hasNextPage}</td>
        </tr>
    </table>
    <table class="table table-bordered" id='tableResult'>
        <caption>查询用户结果</caption>
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody id="tableBody">
        <c:forEach items="${pageInfo.list}" var="user">
            <tr>
                <td>${user.userId}</td>
                <td>${user.userName}</td>
                <td>${user.userAge}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <table class="gridtable" style="width:100%;text-align: center;">
        <tr>
            <c:if test="${pageInfo.hasPreviousPage}">
                <td>
                    <a href="listuser?page=${pageInfo.prePage}&rows=${pageInfo.pageSize}">前一页</a>
                </td>
            </c:if>
            <c:forEach items="${pageInfo.navigatepageNums}" var="nav">
                <c:if test="${nav == pageInfo.pageNum}">
                    <td style="font-weight: bold;">${nav}</td>
                </c:if>
                <c:if test="${nav != pageInfo.pageNum}">
                    <td>
                        <a href="listuser?page=${nav}&rows=${pageInfo.pageSize}">${nav}</a>
                    </td>
                </c:if>
            </c:forEach>
            <c:if test="${pageInfo.hasNextPage}">
                <td>
                    <a href="listuser?page=${pageInfo.nextPage}&rows=${pageInfo.pageSize}">下一页</a>
                </td>
            </c:if>
        </tr>
    </table>
</c:if>
</body>
</html>